
<template>
  <section class="applyField">
    <section class="applyField">
      <img class="img" src="@/assets/images/applyField/banner.png" lazy-load />
      <ul class="applyField-tab">
        <li
          :class="{ active: activeIndex == index }"
          v-for="(item, index) in tab"
          :key="index"
          @click="switchActive(item, index)"
        >{{ item.label }}</li>
      </ul>
      <section class="applyField-content">
        <component :is="activeName" />
      </section>
    </section>
  </section>
</template>

<script setup lang="ts">
import { ref, reactive, markRaw, computed } from 'vue'
import { useStore } from 'vuex'
import control from './components/control.vue'
import management from './components/management.vue'
import user from './components/user.vue'
import field from './components/field.vue'

const store = useStore()
let activeIndex = computed(() => store.state.applyFieldIndex)
const tab = reactive([
  {
    label: '访问管控',
    key: markRaw(control),
  },
  {
    label: '出入管理',
    key: markRaw(management),
  },
  {
    label: '用户验证',
    key: markRaw(user),
  },
  {
    label: '应用领域',
    key: markRaw(field),
  },
])
let activeName = ref(tab[activeIndex.value].key)
const switchActive = (item: any, index: number) => {
  store.dispatch('setApplyIndex', index)
  activeName.value = item.key

  let a = document.querySelector('.img')
  if (a != null) {
    let heightTop = a.clientHeight
    window.scrollTo({
      top: heightTop,
      behavior: 'smooth',
    })
  }
}
</script>

<style lang="scss" scoped>
.applyField {
  font-family: 'Source Han Sans CN, Source Han Sans CN-Regular';
  &-tab {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 90px;
    font-size: 32px;
    color: #686868;
    background-color: #daeeff;
    position: sticky;
    top: 110px;
    li {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100%;
      &.active {
        color: #333333;
        border-bottom: 4px solid #2087e3;
      }
    }
  }
  &-content {
    padding: 0 24px;
  }
}
</style>